
<style>
    #bg_box2{   position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.26);
        /*background-color: black;*/
        /*opacity: 0.3;*/
        z-index: 100;
        visibility: hidden;
        /*border: 1px solid red;*/}
    #box{
        width: 540px;
        height: 528px;
        border-radius: 10px;
        background: linear-gradient(to left, #36ebed, #94e9ff);
        position: relative;
        margin: 150px auto;
    }
    .box_header{
        height: 48px;
        border-bottom: 1px solid gainsboro;
        text-align: center;
        line-height: 48px;
    }
    .box_content{
        width: 540px;
        height: 420px;
        background-color: white;
    }
</style>
<section id="main">
    <div class="scrollbar1-1" id="style1-1">
        <div class="main_div">
            <div class="main_title">
                <span>鎬婚儴浠撳簱</span>
            </div>
            <div class="blank"></div>
            <div class="add_menu">
                <span class="">娣诲姞鍒嗙被</span>
                <div class="dropdown select" >
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        鍟嗗搧绉嶇被
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#">鐢熼矞</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <button class="btn-primary btn-sm">纭娣诲姞</button>
            </div>
            <div class="add_active">
                <span class="">閫夋嫨鍒嗙被</span>
                <div class="dropdown select" >
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        鍟嗗搧绉嶇被
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                        <li><a href="#">鐢熼矞</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <div class="dropdown select" >
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        鍟嗗搧绉嶇被
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
                        <li><a href="#">鐢熼矞</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <div class="dropdown select" >
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        鍟嗗搧绉嶇被
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
                        <li><a href="#">鐢熼矞</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <div class="row">
                    <div class="col-lg-2 col-md-2 col-sm-2">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="鍟嗗搧鍚嶇О">
                        </div><!-- /input-group -->
                    </div><!-- /.col-lg-6 -->
                    <div class="col-lg-2 col-md-2 col-sm-2">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="鍟嗗搧鏉＄爜">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button">鎼滅储</button>
                            </span>
                        </div><!-- /input-group -->
                    </div><!-- /.col-lg-6 -->
                </div><!-- /.row -->
            </div>

        </div>


        <div class="force-overflow1-1">
            <div class="list">
                <div class="list_title">
                    <span>搴忓彿</span>
                    <ul>
                        <li>缂╃暐鍥�</li>
                        <li>鍟嗗搧鍚嶇О</li>
                        <li>鍟嗗搧浠锋牸</li>
                        <li>鍟嗗搧鏉＄爜</li>
                        <li>鎿嶄綔</li>
                    </ul>
                </div>
                <div class="list_commodity">
                    <span>1</span>
                    <ul>
                        <li><img src="" alt="缂╃暐鍥�" style="width: 60px;height: 60px;float: left"></li>
                        <li>鐜夋邯</li>
                        <li>锟�22</li>
                        <li>56564646454646</li>
                        <li><button>涓婃灦</button></li>
                    </ul>
                </div>
                <div class="list_commodity">
                    <span>1</span>
                    <ul>
                        <li><img src="" alt="缂╃暐鍥�" style="width: 60px;height: 60px;float: left"></li>
                        <li>鐜夋邯</li>
                        <li>锟�22</li>
                        <li>56564646454646</li>
                        <li><button>涓婃灦</button></li>
                    </ul>
                </div>
                <div class="list_commodity">
                    <span>1</span>
                    <ul>
                        <li><img src="" alt="缂╃暐鍥�" style="width: 60px;height: 60px;float: left"></li>
                        <li>鐜夋邯</li>
                        <li>锟�22</li>
                        <li>56564646454646</li>
                        <li><button>涓婃灦</button></li>
                    </ul>
                </div>
                <div class="list_commodity">
                    <span>1</span>
                    <ul>
                        <li><img src="" alt="缂╃暐鍥�" style="width: 60px;height: 60px;float: left"></li>
                        <li>鐜夋邯</li>
                        <li>锟�22</li>
                        <li>56564646454646</li>
                        <li><button>涓婃灦</button></li>
                    </ul>
                </div>
                <div class="list_commodity">
                    <span>1</span>
                    <ul>
                        <li><img src="" alt="缂╃暐鍥�" style="width: 60px;height: 60px;float: left"></li>
                        <li>鐜夋邯</li>
                        <li>锟�22</li>
                        <li>56564646454646</li>
                        <li><button>涓婃灦</button></li>
                    </ul>
                </div>
                <div class="list_commodity">
                    <span>1</span>
                    <ul>
                        <li><img src="" alt="缂╃暐鍥�" style="width: 60px;height: 60px;float: left"></li>
                        <li>鐜夋邯</li>
                        <li>锟�22</li>
                        <li>56564646454646</li>
                        <li><button>涓婃灦</button></li>
                    </ul>
                </div>
                <div class="list_commodity">
                    <span>1</span>
                    <ul>
                        <li><img src="" alt="缂╃暐鍥�" style="width: 60px;height: 60px;float: left"></li>
                        <li>鐜夋邯</li>
                        <li>锟�22</li>
                        <li>56564646454646</li>
                        <li><button>涓婃灦</button></li>
                    </ul>
                </div>
                <div class="list_commodity">
                    <span>1</span>
                    <ul>
                        <li><img src="" alt="缂╃暐鍥�" style="width: 60px;height: 60px;float: left"></li>
                        <li>鐜夋邯</li>
                        <li>锟�22</li>
                        <li>56564646454646</li>
                        <li><button>涓婃灦</button></li>
                    </ul>
                </div>

            </div>
        </div>
    </div>

</section>
<div id="bg_box2">
    <div id="box">
        <div class="box_header textYellow" >
            <span>璇︾粏璧勬枡</span>
        </div>
        <div class="box_content" >
            <div class="blank"></div>
            <form class="form-horizontal" >
                <div class="form-group">
                    <label  class="col-xs-4 control-label">鍟嗗搧鍚嶇О</label>
                    <div class="col-xs-6">
                        <input type="text" class="form-control"  placeholder="鍟嗗搧鍚嶇О">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-4 control-label">闆跺敭浠�</label>
                    <div class="col-xs-6">
                        <input type="text" class="form-control"  placeholder="闆跺敭浠�">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-4 control-label">浼氬憳浠�</label>
                    <div class="col-xs-6">
                        <input type="text" class="form-control"  placeholder="浼氬憳浠�">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-4 control-label">淇冮攢浠�</label>
                    <div class="col-xs-6">
                        <input type="text" class="form-control"  placeholder="淇冮攢浠�">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-4 control-label">棣栭〉鎺ㄨ崘</label>
                    <div class="col-xs-6">
                        <label class="radio-inline">
                            <input type="radio"  name="inlineRadioOptions"  value="option1">鏄�
                        </label>
                        <label class="radio-inline">
                            <input type="radio"  name="inlineRadioOptions"  value="option2">鍚�
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-4 control-label">鏄惁涓婃灦</label>
                    <div class="col-xs-6">
                        <label class="radio-inline">
                            <input type="radio" name="inlineRadioOptions2" value="option1">鏄�
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="inlineRadioOptions2" value="option2">鍚�
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-xs-4 control-label">鍟嗗搧鏁伴噺</label>
                    <div class="col-xs-6">
                        <input type="text" class="form-control"  placeholder="鍟嗗搧鏁伴噺">
                    </div>
                </div>
            </form>
        </div>
        <div class="box_footer">
            <ul>
                <li>鍏抽棴</li>
                <li>鎻愪氦</li>
            </ul>
        </div>
    </div>
</div>
<script>
    $(function () {
        $(".list_commodity>ul>li>button").click(function () {
                $("#bg_box2").css("visibility","visible");
        });
        $(".box_footer>ul>li:first-child").click(function () {
            $("#bg_box2").css("visibility","hidden");
            return false;
        });
        $(".box_footer>ul>li:last-child").click(function () {
            $("#bg_box2").css("visibility","hidden");
        });
    })
</script>